<template>

  <div class="app-container">
    <el-row style="margin-bottom:15px">
      <el-autocomplete
        v-model="field"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入单位名称"
        clearable
        @select="handleSelect"
      />
      <el-date-picker
        v-model="time"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        clearable
      />
      <el-button class="filter-item but" type="primary" icon="el-icon-search" @click="send">
        搜索
      </el-button>
    </el-row>
    <echarts ref="receive" width="100%" height="700px" />
  </div>

</template>

<script>
import echarts from '@/components/echarts/index'
import { formatDate } from '@/api/table'
import { searchfield } from '@/api/curd'
export default {
  name: 'Dashoard',
  filters: {
    // statusFilter(status) {
    //   const statusMap = {
    //     published: 'success',
    //     draft: 'gray',
    //     deleted: 'danger'
    //   }
    //   return statusMap[status]
    // }
    formatDate(time) {
      time = time.replace(/T/g, ' ')
      time = time.replace(/Z/g, ' ')
      var date = new Date(time)
      if (time !== '') {
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    }
  },
  // import引入的组件需要注入到对象中才能使用
  components: { echarts },
  data() {
    // 这里存放数据
    return {
      field: '',
      restaurants: [],
      All: [],
      time: '',
      timedata: {
        time1: '',
        time2: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  // 计算属性
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getdata()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.restaurants = this.loadAll()
  },
  // 这里存放数据
  beforeCreate() {},
  // 生命周期 - 挂载之前
  beforeMount() {},
  // 生命周期 - 更新之前
  beforeUpdate() {},
  // 生命周期 - 更新之后
  updated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 方法集合
  methods: {
    async getdata() {
      const res = await searchfield()
      console.log('res: ', res)
      res.data.forEach(item => {
        item.value = item.field
        this.All.push(item)
      })
    },
    loadAll() {
      return this.All
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      cb(results)
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
      console.log(item)
      console.log(this.field)
    },
    send() {
      console.log('this.time: ', this.time)
      if (this.time !== null) {
        this.timedata.time1 = formatDate(this.time[0], 'yyyy-MM-dd hh:mm:ss')
        this.timedata.time2 = formatDate(this.time[1], 'yyyy-MM-dd hh:mm:ss')
        console.log('this.timedata: ', this.timedata)
      }
      if (this.time == null) {
        this.timedata = {
          time1: '',
          time2: '' }
      }
      this.$refs.receive.sendItem(this.field, this.timedata)
    }

  }
}
</script>

<style>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

}
.github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }
/* .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-top: 32px;
    margin-bottom: 32px;
  } */
@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
